<link rel="stylesheet" href="/static/css/back_article_comm.css"/>
<style>
    .account-panel .input-group .input-group-addon {
        background-color: #eee;
        border-radius: 4px 0 0 4px;
    }

    .account-panel input.disabled {
        background-color: #fff !important;
    }

    .account-panel table td .btn .fa-sort-desc {
        position: relative;
        top: -4px;
        left: 4px;
    }
    .modal .fa-times {
        position: absolute;
        right: 15px;
        top: 15px;
        text-decoration: none;
        color: #ccc;
    }

    .modal .fa-times:hover {
        color: #444;
    }
    /*popover START*/
    input.disabled {
        background-color: #fff !important;
    }

    .popover.top {
        margin-top: -7px;
    }

    .popover {
        font-size: 10px;

    }

    .popover-content {
        padding: 3px 10px;
        color: #f00;
    }

    /*popover END*/
    @media screen and (min-width: 1200px) {
        .content table td.table-operate {
            width: 150px;
        }
    }

    @media screen and (min-width: 992px) {
        .content table td.table-operate {
            width: 150px;
        }
    }
</style>
<div class="panel panel-info account-panel">
    <div class="panel-heading">
        <a class="btn btn-success table-filter"><i class="fa fa-filter fa-md"></i> 筛 选</a>
        <a class="btn btn-success table-reset" style="display: none;"><i class="fa fa-refresh fa-md"></i> 重置条件</a>
        <a class="btn btn-success add"  data-toggle="modal" data-target="#privateAccountModal"><i class="fa fa-plus fa-md"></i> 添加账号</a>
    </div>
    <div class="panel-body" style="display: none;">
        <form class="bs-example bs-example-form" role="form">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <span class="input-group-addon">所属平台</span>
                    <input type="text" id="se_platfrm" class="form-control" placeholder="请输入平台关键字...">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <span class="input-group-addon">所属分支</span>
                    <input type="text" id="se_branch" class="form-control" placeholder="请输入分支关键字...">
                </div>
            </div>
        </form>
    </div>
    <table class="table table-hover  table-condensed" id="account-table">
        <thead>
        <tr>
            <th>id</th>
            <th>平台</th>
            <th>分支</th>
            <th>账号</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>手机</th>
            <th>QQ</th>
            <th>微信</th>
            <th>支付宝</th>
            <th>地址</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <!--<th>描述信息</th>-->
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="privateAccount">
        <!--<tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="table-operate">
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-warning"><i class="fa fa-edit fa-md"></i> 删除 </a></span>
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-warning"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
            </td>
        </tr>-->
        </tbody>
    </table>
</div>
<div class="table-page text-center">
    <ul class="pagination">
        <li class="page-prev disabled"><a href="javascript:void(0)">&laquo;</a></li>
        <!--<li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>-->
        <li class="page-next"><a href="javascript:void(0)">&raquo;</a></li>
    </ul>
</div>
<!--添加-->
<div class="modal fade" id="privateAccountModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">添加平台账号</h4>
            </div>
            <div class="modal-body">
                <form class="bs-example bs-example-form" id="accountForm">
                   <input id="id" name="id" type="hidden"/>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">所属平台</span>
                            <input type="text" id="platform" name="platform" class="form-control" placeholder="请输入平台名称..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">所属分支</span>
                            <input type="text" id="branches" name="branches" class="form-control" placeholder="请输入平台所属分支..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">账号</span>
                            <input type="text" id="account" name="account" class="form-control" placeholder="请输入账号..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="text" id="password" name="password" class="form-control" placeholder="请输入密码..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">Email</span>
                            <input type="text" id="email" name="email" class="form-control" placeholder="请输入email..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">手机号码</span>
                            <input type="text" id="phone" name="phone" class="form-control" placeholder="请输入绑定的手机号码..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">QQ</span>
                            <input type="text" id="qq" name="qq" class="form-control" placeholder="请输入绑定的QQ号码..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">weixin</span>
                            <input type="text" id="weixin" name="weixin" class="form-control" placeholder="请输入绑定的微信号码..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">支付宝账号</span>
                            <input type="text" id="alipay" name="alipay" class="form-control" placeholder="请输入绑定的支付宝账号..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="input-group">
                            <span class="input-group-addon">平台地址</span>
                            <input type="text" id="url" name="url" class="form-control" placeholder="请输入平台或分支所在地址..."
                                   data-placement="top">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" style="height:100%">
                        <textarea class="form-control" id="desc" name="desc" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdate" class="">确认更改</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/back_article_comm.js"></script>
<script>
    $(function(){
        $(".account-panel a.add").on("click",function(){
            $("#privateAccountModal").modal({
                backdrop: 'static'
            });
            $("#saveOrUpdate").removeClass("account_update").addClass("account_save");
            $("#accountForm input").val("");
            return false;
        });

        $("#privateAccount span.privateCount_edit").on("click",function(){
            $("#privateAccountModal").modal({
                backdrop: 'static'
            });
            return false;
        });

    });
    $(function () {
        loadPrivateAccountList(true);
        $(document).off(".search").on("keydown.search", keyDownSearch);//添加键盘事件
        $(".account-panel a.table-filter").click(tableFilterClick);// 条件筛选按钮事件
        $(".account-panel a.table-reset").click(tableFilterResetClick);//重置筛选条件
        $("#privateAccountModal").on("click",".account_save",accountSaveClick);//添加账号
        $("#account-table").on("click","span.privateCount_del",countDelClick);//删除账号
        $("#account-table").on("click","span.privateCount_edit",countEditClick);//编辑账号
        $("#privateAccountModal").on("click",".account_update",countUpdateClick);
    });
    function validate(){
        var param = $("#accountForm").serializeObject();
        if(!param.platform){
            $("#platform").attr("data-content", "此字段不能为空").popover('show');
            return false;
        }
        if(!param.branches){
            $("#platform").attr("data-content", "此字段不能为空").popover('show');
            return false;
        }
        return param;
    }
    function countUpdateClick(){
        var param = $("#accountForm").serializeObject();
        var passTem = false;
        if(!param.platform){
            $("#platform").attr("data-content", "此字段不能为空").popover('show');
            passTem = true;
        }else{
            $("#platform").attr("data-content", "此字段不能为空").popover('hide');
        }
        if(!param.branches){
            $("#branches").attr("data-content", "此字段不能为空").popover('show');
            passTem = true;
        }else{
            $("#branches").attr("data-content", "此字段不能为空").popover('hide');
        }
        if(passTem){
            return false;
        }

        $.ajax({
            url:"../privateAccount/back/updateById.zb",
            type:"POST",
            dataType:"json",
            contentType: "application/json",
            data:JSON.stringify(param)
        }).done(function(res){
            if(res && res.success){
                loadPrivateAccountList(true);
                layer.msg(res.msg || "更新成功", fn);
                $("#privateAccountModal").modal('hide')
            }else{
                layer.msg(res.msg || "更新失败", fn);
            }
        }).fail(function(){
            layer.msg('可能由于网络等原因加载失败！', function () {});
        });
    }
    function countEditClick(){
        $("#saveOrUpdate").removeClass("account_save").addClass("account_update");
        var id = $(this).parents("td").siblings().first().text();
        $.ajax({
            url:"../privateAccount/back/getById.zb",
            dataType:"JSON",
            data:{id:id}
        }).done(function(res){
            if(!res){
                layer.msg('可能由于网络等原因加载失败！', function () {});
                return false;
            }
            for(var s in res){
                $("#"+s).val(res[s]);
            }
        }).fail(function(){
            layer.msg('可能由于网络等原因加载失败！', function () {});
        });
    }
    function countDelClick(){
        var id = $(this).parents("td").siblings().first().text();
        $.ajax({
           url:"../privateAccount/back/deleteById.zb",
           data:{id:id},
           dataType:"JSON"
        }).done(function(data){
            if(data && data.success){
                loadPrivateAccountList(true);
                layer.msg(data.msg, fn);
            }else{
                layer.msg(data.msg || "删除失败！", fn)
            }
        }).fail(function(){
            layer.msg('可能由于网络等原因加载失败！', function () {});
        });
    }
    function accountSaveClick(){
        var param = $("#accountForm").serializeObject();
        var passTem = false;
        if(!param.platform){
            $("#platform").attr("data-content", "此字段不能为空").popover('show');
            passTem = true;
        }else{
            $("#platform").attr("data-content", "此字段不能为空").popover('hide');
        }
        if(!param.branches){
            $("#branches").attr("data-content", "此字段不能为空").popover('show');
            passTem = true;
        }else{
            $("#branches").attr("data-content", "此字段不能为空").popover('hide');
        }
        if(passTem){
            return false;
        }

        $.ajax({
            url:"../privateAccount/back/add.zb",
            type:"POST",
            dataType:"json",
            contentType: "application/json",
            data:JSON.stringify(param)
        }).done(function(res){
            loadPrivateAccountList(true);
            layer.msg(res.msg || "添加成功", fn);
            $("#privateAccountModal").modal('hide')
        }).fail(function(){
            layer.msg('可能由于网络等原因加载失败！', function () {});
        });
    }
    function tableFilterResetClick() {
        var $input = $(".notice-panel .panel-body form input");
        $input.val("");
        global_Art_Var.pageNum = 1;//重置分页
        loadPrivateAccountList(true);
    }
    function keyDownSearch(e) {
        var keyCode = e.keyCode;
        if (keyCode == 13) {
            global_Art_Var.pageNum = 1;//重置分页
            loadPrivateAccountList(true);
            return false;
        }
    }
    function loadPrivateAccountList(isLoadPagination){
        var param  = {};
        param.pageNum = global_Art_Var.pageNum;
        param.pageSize = global_Art_Var.pageSize;
        param.platform = $("#se_platfrm").val();
        param.branches = $("#se_branch").val();
        $.ajax({
            url:"../privateAccount/back/list.zb",
            type: "POST",
            dataType: "JSON",
            contentType: "application/json",
            data: JSON.stringify(param)
        }).done(function(data){
            var $tbody = $("#account-table tbody");
            $tbody.empty();
            if(data && data.list && data.list.length>0){
                var list = data.list;
                console.log(list)
                for(var i=0;i<list.length;i++){
                    var l = list[i];
                    var tr = "<tr>" +
                        "            <td>"+l.id+"</td>" +
                        "            <td>"+l.platform+"</td>" +
                        "            <td>"+l.branches+"</td>" +
                        "            <td>"+l.account+"</td>" +
                        "            <td>"+l.password+"</td>" +
                        "            <td>"+l.email+"</td>" +
                        "            <td>"+l.phone+"</td>" +
                        "            <td>"+l.qq+"</td>" +
                        "            <td>"+l.weixin+"</td>" +
                        "            <td>"+l.alipay+"</td>" +
                        "            <td>"+l.url+"</td>" +
                        "            <td>"+l.create_time+"</td>" +
                        "            <td>"+l.update_time+"</td>" +
                        //"            <td>"+l.desc+"</td>" +
                        "            <td class=\"table-operate\">\n" +
                        "                <span class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12 privateCount_del\"><a class=\"btn btn-danger\"><i class=\"fa fa-edit fa-md\"></i> 删除 </a></span>\n" +
                        "                <span class=\"col-lg-6 col-md-6 col-sm-12 col-xs-12 privateCount_edit\" data-toggle=\"modal\" data-target=\"#privateAccountModal\"><a class=\"btn btn-warning\"><i class=\"fa fa-edit fa-md\"></i> 编辑 </a></span>\n" +
                        "            </td>"
                        "        </tr>"
                    $tbody.append(tr);
                }
            }
            global_Art_Var.totalPage = data.pages;
            if (isLoadPagination || global_Art_Var.isLoadPagination) {
                global_Art_Var.isLoadPagination = false;
                $(".table-page ul.pagination li").not(".page-prev,.page-next").remove();
                var lis = "";
                for (var i = 0; i < data.pages; i++) {
                    if (i == 0) {
                        lis += " <li class='active'><a href='javascript:void(0)'>" + (i + 1) + "</a></li>";
                    } else {
                        lis += " <li><a href='javascript:void(0)'>" + (i + 1) + "</a></li>";
                    }
                }
                if (global_Art_Var.totalPage === 1) {
                    $(".table-page ul.pagination li.page-next").addClass("disabled");
                    $(".table-page ul.pagination li.page-next").addClass("disabled");
                }
                $(".table-page ul.pagination li.page-prev").after(lis);
            }
        }).fail(function () {
            layer.msg('可能由于网络等原因加载失败！', function () {
            });
        }).always(function () {
            $(".content_loading").hide();
        });
    }
</script>